import { Alert, Checkbox, Icon, message } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import React, { Component } from 'react';
import { Link } from 'umi';
import { connect } from 'dva';
import LoginComponents from './components/Login';
import styles from './style.less';
const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginComponents;

import { router } from 'umi';


class Login extends Component {
    loginForm = undefined;
    state = {
        type: 'account',
        autoLogin: true,
        loading: false,
    };
    changeAutoLogin = e => {
        this.setState({
            autoLogin: e.target.checked,
        });
    };
    handleSubmit = (err, values) => {
        const { type } = this.state;

        if (!err) {
            const { dispatch } = this.props;
            const formData = new FormData();
            Object.keys(values).forEach((key) => {
                formData.append(key, values[key]);
            });


            this.setState({
                loading: true,
            }, () => {
                fetch('/api/users/login', {
                    method: 'post',
                    body: formData,
                }).then(res => res.json())
                    .then(res => {
                        if (res && res.status === 'success') {
                            dispatch({
                                type: 'login/changeLoginStatus',
                                payload: res
                            });
                            return res.status;
                        } else {
                            message.error(res && res.message);
                        }
                    }).then(res => {
                        if (res === 'success') {
                            router.replace('/');
                        }
                    })
            })



        }
    };
    onTabChange = type => {
        this.setState({
            type,
        });
    };
    onGetCaptcha = () =>
        new Promise((resolve, reject) => {
            if (!this.loginForm) {
                return;
            }

            this.loginForm.validateFields(['mobile'], {}, async (err, values) => {
                if (err) {
                    reject(err);
                } else {
                    const { dispatch } = this.props;

                    try {
                        const success = await dispatch({
                            type: 'login/getCaptcha',
                            payload: values.mobile,
                        });
                        resolve(!!success);
                    } catch (error) {
                        reject(error);
                    }
                }
            });
        });
    renderMessage = content => (
        <Alert
            style={{
                marginBottom: 24,
            }}
            message={content}
            type="error"
            showIcon
        />
    );

    render() {
        const { userLogin = {}, submitting } = this.props;
        const { status, type: loginType } = userLogin;
        const { type, autoLogin } = this.state;
        const {loading} = this.state;
        return (
            <div className={styles.main}>
                <LoginComponents
                    defaultActiveKey={type}
                    onTabChange={this.onTabChange}
                    onSubmit={this.handleSubmit}
                    onCreate={form => {
                        this.loginForm = form;
                    }}
                >
                    <Tab
                        key="account"
                        tab={formatMessage({
                            id: 'user-login.login.tab-login-credentials',
                        })}
                    >
                        {status === 'error' &&
                            loginType === 'account' &&
                            !submitting &&
                            this.renderMessage(
                                formatMessage({
                                    id: 'user-login.login.message-invalid-credentials',
                                }),
                            )}
                        <UserName
                            //name="userName"
                            name="username"
                            placeholder={`${formatMessage({
                                id: 'user-login.login.userName',
                            })}: 1230936`}
                            rules={[
                                {
                                    required: true,
                                    message: formatMessage({
                                        id: 'user-login.userName.required',
                                    }),
                                },
                            ]}
                        />
                        <Password
                            //name="password"
                            name="password"
                            placeholder={`${formatMessage({
                                id: 'user-login.login.password',
                            })}: 123`}
                            rules={[
                                {
                                    required: true,
                                    message: formatMessage({
                                        id: 'user-login.password.required',
                                    }),
                                },
                            ]}
                            onPressEnter={e => {
                                e.preventDefault();

                                if (this.loginForm) {
                                    this.loginForm.validateFields(this.handleSubmit);
                                }
                            }}
                        />

                        <UserName
                            //name="password"
                            name="workcellId"
                            placeholder="部门编号：7"
                            rules={[
                                {
                                    required: true,
                                    message: "部门编号不能为空",
                                },
                            ]}
                            onPressEnter={e => {
                                e.preventDefault();

                                if (this.loginForm) {
                                    this.loginForm.validateFields(this.handleSubmit);
                                }
                            }}
                        />
                    </Tab>
                    <Tab
                        key="mobile"
                        tab={formatMessage({
                            id: 'user-login.login.tab-login-mobile',
                        })}
                    >
                        {status === 'error' &&
                            loginType === 'mobile' &&
                            !submitting &&
                            this.renderMessage(
                                formatMessage({
                                    id: 'user-login.login.message-invalid-verification-code',
                                }),
                            )}
                        <Mobile
                            name="mobile"
                            placeholder={formatMessage({
                                id: 'user-login.phone-number.placeholder',
                            })}
                            rules={[
                                {
                                    required: true,
                                    message: formatMessage({
                                        id: 'user-login.phone-number.required',
                                    }),
                                },
                                {
                                    pattern: /^1\d{10}$/,
                                    message: formatMessage({
                                        id: 'user-login.phone-number.wrong-format',
                                    }),
                                },
                            ]}
                        />
                        <Captcha
                            name="captcha"
                            placeholder={formatMessage({
                                id: 'user-login.verification-code.placeholder',
                            })}
                            countDown={120}
                            onGetCaptcha={this.onGetCaptcha}
                            getCaptchaButtonText={formatMessage({
                                id: 'user-login.form.get-captcha',
                            })}
                            getCaptchaSecondText={formatMessage({
                                id: 'user-login.captcha.second',
                            })}
                            rules={[
                                {
                                    required: true,
                                    message: formatMessage({
                                        id: 'user-login.verification-code.required',
                                    }),
                                },
                            ]}
                        />
                    </Tab>
                    <div>
                        <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
                            <FormattedMessage id="user-login.login.remember-me" />
                        </Checkbox>
                        <a
                            style={{
                                float: 'right',
                            }}
                            href=""
                        >
                            <FormattedMessage id="user-login.login.forgot-password" />
                        </a>
                    </div>
                    <Submit loading={loading}>
                        <FormattedMessage id="user-login.login.login" />
                    </Submit>
                    {/* <div className={styles.other}>
                        <FormattedMessage id="user-login.login.sign-in-with" />
                        <Icon type="alipay-circle" className={styles.icon} theme="outlined" />
                        <Icon type="taobao-circle" className={styles.icon} theme="outlined" />
                        <Icon type="weibo-circle" className={styles.icon} theme="outlined" />
                        <Link className={styles.register} to="/user/register">
                            <FormattedMessage id="user-login.login.signup" />
                        </Link>
                    </div> */}
                </LoginComponents>
            </div>
        );
    }
}

export default connect(({ login, loading }) => ({
    userLogin: login,
    submitting: loading.effects['login/login'],
}))(Login);
